<template>
<div v-if="pd">
    <el-row>
        <el-col :span="24">
            <el-row>
                <el-col :span="2" class="title" :type="xuanzhong == 0 ? 'primary' : 'default'"
                    @click="fenlie(0)">全部门店</el-col>
                <el-col :span="2" class="title" :type="xuanzhong == 1 ? 'primary' : 'default'"
                    @click="fenlie(1)">上架中</el-col>
                <el-col :span="2" class="title" :type="xuanzhong == 2 ? 'primary' : 'default'"
                    @click="fenlie(2)">已下架</el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" class="col">
            <el-row>
                <el-col :span="6">门店名称：<el-input v-model="search.name" placeholder="请输入门店名称" clearable /></el-col>
                <el-col :span="6">门店手机号:<el-input v-model="search.phone" clearable></el-input></el-col>
                <el-col :span="10">提交时间:
                    <el-date-picker v-model="search.time" type="daterange" range-separator="至" start-placeholder="起始日期"
                        end-placeholder="终止日期" />
                </el-col>
                <el-col :span="1"><el-button type="primary"
                        @click="sousuo(search.name, search.phone,search.time, )">搜索</el-button></el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row>
        <el-ro>
            <el-col :span="24" class="col"><el-button type="primary" @click="xinzeng">新增门店</el-button></el-col>
        </el-ro>
    </el-row>
    <el-col :span="24" class="col">
        <el-table :data="areaList" border>
            <el-table-column prop="shopName" label="门店" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="shopId" label="id" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="shopPhone" label="门店手机号" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="shopAddress" label="门店地址" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="shopDescribe" label="营业时间" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="concernStatus" label="关联小区" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="salesVolume" label="订单数量" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="shopCommunitySort" label="提交方式" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="shopStatus" label="状态" align="center" label-class-name="header">
                <template #default="item">
                    <el-button type="text" v-if="item.row.shopStatus = 1">上架中</el-button>
                    <el-button type="text" v-else>下架中</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" label-class-name="header">
                <template #default="item">
                    <el-button type="text" @click="manage">门店管理</el-button>
                    <el-button type="text" @click="xiugai(item.row)">修改门店资料</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-col>
    <el-dialog v-model="show" :title="title" width="800" destroy-on-close="true">
        <XinZeng v-if="title == '新增门店'" @operate="operateAction" />
        <EditeMendian v-if="title == '修改门店资料'" @operate="operateAction" :data="mendian" />
    </el-dialog>
</div>
<div v-else>
    <MenDianGuanLi></MenDianGuanLi>
</div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
import XinZeng from './components/mendian/XinZeng.vue';
import EditeMendian from './components/mendian/EditeMendian.vue';
// import TianJiaYiZhan from './components/yizhan/TianJiaYiZhan.vue';
import axios from 'axios';
import MenDianGuanLi from './components/mendian/MenDianGuanLi.vue';
let res = null;
let title = ref("");
let show = ref(false);
let xuanzhong = ref(0);
let mendian = ref({});
let pd = ref(true)
let areaList = ref([]);
let shopStatus = ref();


const fenlie = function (index) {
    xuanzhong.value = index;
}

const manage = function () {
    pd.value=false;

}
const xiugai = function (data) {
    show.value = true;
    title.value = "修改门店资料"
    mendian.value = data;
    console.log(data);
    // show.value = true;
    // title.value = "编辑小区";
    // xiaoqu.value = data.row;
}

const search = reactive({
    nmae: null,
    time: null
});

const xinzeng = function () {
    show.value = true;
    title.value = "新增门店";
}
const timeFun = (time) => {
    var d = time ? new Date(time) : new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hours = d.getHours();
    var min = d.getMinutes();
    var seconds = d.getSeconds();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    if (hours < 0) hours = "0" + hours;
    if (min < 10) min = "0" + min;
    if (seconds < 10) seconds = "0" + seconds;

    return year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + seconds;
}

const sousuo = async function (name,phone ,time ) {
    let starTime = ""
    let endTime = ""
    if (time != null) {
        starTime = timeFun(time[0]);
        endTime = timeFun(time[1]);
    }
    res = await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/shop/querySearchShopList?pageNum=${name}&pageSize=10&phone=${phone}&keyword=1&shopStatus=&startTime=${starTime}&endTime=${endTime}`)
    areaList.value = res.data.data.list.map(item => {
        // item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        
        return item;
    });
    console.log(res);
}

const operateAction = async function (data) {
    if (data) {
        await axios.post(`http://43.143.190.87:8091/panghudaojiaBackend/shop/${data.name}`, {
            ...data.data
        });
        res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/shop/querySearchShopList?pageNum=1&pageSize=10&phone=&keyword=&shopStatus=&startTime=&endTime=");
        console.log(res);
        areaList.value = res.data.data.list.map(item => {
            // item.shopAddress = item.shopLongitude + item.shopLatitude;
            shopStatus.value=item.shopStatus
            return item;
        });

    }
    show.value = false;
}



//组件首次挂载结束（通常代表组件首次加载）
onMounted(async function () {
    res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/shop/querySearchShopList?pageNum=1&pageSize=10&phone=&keyword=&shopStatus=&startTime=&endTime=");
    console.log(res);
    areaList.value = res.data.data.list.map(item => {
        // item.shopAddress = item.shopLongitude + item.shopLatitude;
        return item;
    });
})



</script>

<style lang="less" scoped>
.title {
    color: #10d0d6;
}

.title {
    margin-left: 10px;
    margin-bottom: 30px;
}

.el-row {
    margin: 10px;
}

.el-input {
    width: 180px;
    height: 35px;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>